<template>
  <div class="count">
    <h1>{{ count }}</h1>
    <button @click="add(num)">累加</button>
    <button @click="showThis"></button>
  </div>
</template>

<script>
export default {
  name: "My-Count",
  props: ["num"],
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add(num) {
      this.count += num;
    },
    // 上面add中传入参数num,这里接收实现累加
    showThis() {
      console.log(this);
      //这个函数只是为了查看props的值
      //  在组件的配置项中,声明要接受的props的属性
      // 在当前的组件实例上有一个_props的对象,保存着当前的接收的prop
      // 并且把prop的值在组件实例上也放了一份,我们可以直接获取
    },
  },
};
</script>

<style>
.count {
  background-color: yellowgreen;
  height: 200px;
}
</style>